<template>
  <el-tabs
    type="border-card"
    class="tab"
    v-model="activeName"
    @tab-click="handleClick"
  >
    <el-tab-pane label="管理员" name="first">
      <table-item v-if="isFirst"></table-item>
    </el-tab-pane>
    <el-tab-pane label="采购员" name="second">
      <table-item :type="1" v-if="isSecond"></table-item>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import tableItem from "./tableItem.vue";
export default {
  components: { "table-item": tableItem },
  data() {
    return {
      activeName: "first",
      isFirst: true,
      isSecond: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.isFirst = true;
        this.isSecond = false;
      } else if (tab.name === "second") {
        this.isFirst = false;
        this.isSecond = true;
      } 
    },
  },
};
</script>

<style>
.tab {
    margin-top: 100px;
    width: 90%;
}
</style>